import commonMethod from "./commonMethod";
import $ from "jquery"
/**
 * 右键菜单
 */
class RightMenu {
    constructor(menuArray,curViewer) {
    
		this.id=commonMethod.creatUUID();
		this.parentEle=curViewer.container;
		this.menus=menuArray;
        this.CLASS_NAME = "RightMenu";

        this.createMenu();
    }

    createMenu(){
		let _this=this;
		let e="n-dropdown-menu n-popover-shared n-dropdown";
		let ei="n-dropdown-option";
		let n=$("<div style='position: absolute;width:75px;z-index:99;--n-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .24), 0 6px 12px 0 rgba(0, 0, 0, .16), 0 9px 18px 8px rgba(0, 0, 0, .10); --n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-in: cubic-bezier(.4, 0, 1, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-font-size: 14px; --n-text-color: rgba(255, 255, 255, 0.82); --n-color: rgb(72, 72, 78); --n-divider-color: rgba(255, 255, 255, 0.09); --n-border-radius: 3px; --n-arrow-height: 6px; --n-arrow-offset: 10px; --n-arrow-offset-vertical: 10px; --n-padding: 4px 0; --n-space: 6px; --n-space-arrow: 10px; --n-option-height: 34px; --n-option-prefix-width: 14px; --n-option-icon-prefix-width: 36px; --n-option-suffix-width: 14px; --n-option-icon-suffix-width: 32px; --n-option-icon-size: 16px; --n-option-opacity-disabled: 0.38; --n-option-color-hover: rgba(255, 255, 255, 0.09); --n-option-color-active: rgba(99, 226, 183, 0.15); --n-option-text-color: rgba(255, 255, 255, 0.82); --n-option-text-color-hover: rgba(255, 255, 255, 0.82); --n-option-text-color-active: #63e2b7; --n-option-text-color-child-active: #63e2b7; --n-prefix-color: rgba(255, 255, 255, 0.82); --n-suffix-color: rgba(255, 255, 255, 0.82); --n-group-header-text-color: rgba(255, 255, 255, 0.52);'></div>");
		n.attr("class",e);
		n.attr("id",_this.id);
		for(let i=0;i<_this.menus.length;i++){
			let k=$("<div></div>");
			k.addClass(ei);//这是菜单项
			let l=$("<i></i>");
			k.attr("data-item",i);
			l.attr("data-item",i);
			let IconClass="layui-icon layui-icon-file";
			if(_this.menus[i].icon){
				IconClass=_this.menus[i].icon;
			}
			l.addClass(IconClass);
			l.appendTo(k);
			k.appendTo(n);
			l.after("&nbsp; "+_this.menus[i].itemName)
		}
		n.prependTo(_this.parentEle);
		let j=$("<div></div>");
		j.attr("class","shade");
		j.prependTo("body");
		
		/*//监听鼠标右击
		_this.parentEle.addEventListener("mousedown",function(event){
			if(event.which===3){
				//鼠标右键
				if(_this.isShow){
					$("#"+_this.id).css({
						"display":"block",
						"top":event.pageY+"px",
						"left":event.pageX+"px"
						});
				}
			}
		});*/
		
		//菜单按键事件
		$("#"+_this.id).click(function(event){
			let j=parseInt($(event.target).attr("data-item"));
			for(let m=0;m<_this.menus.length;m++){
				if(j===m){
					_this.menus[m].callback();
					$("#"+_this.id).css({"display":"none"});
				}
			}
		});
		
		$(".shade").click(function(){
			$("#"+_this.id).css({"display":"none"});
		})
	}
	show(movenment,flag){
		let _this=this;
		let event = movenment;
		if (movenment.position){
			event = {
				"pageY":movenment.position.y,
				"pageX":movenment.position.x
			}
		}
		_this.isShow=flag;
		if(_this.isShow){
			$("#"+_this.id).css({
				"display":"block",
				"top":event.pageY+"px",
				"left":event.pageX+"px",
				"color": "wheat"
			});
		}else{
			$("#"+_this.id).css({"display":"none"});
		}
	}

	destroy(){
		let _this=this;
		const childNode = document.getElementById(_this.id);
		if (childNode){
			_this.parentEle.removeChild(childNode);
			_this.id=null;
			_this.menus=[];
		}

	}
};

export default RightMenu;